<script>

import {Collection, Menu, More, SwitchButton, UserFilled} from '@element-plus/icons-vue'
import MyFooter from "../../components/MyFooter.vue";

export default {
  components: {SwitchButton, Collection, UserFilled, MyFooter, Menu, More},
  computed: {
    UserFilled() {
      return UserFilled
    }
  },
  data() {
    return {
      hasAvatar: this.$store.state.isLogin && this.$store.state.user.avatarUrl != null
    }
  }
}
</script>

<template>
  <div>
    <el-container>

      <!--      HEADER-->
      <el-header style="margin: 0; padding: 0">
        <el-affix>
          <el-menu
              background-color="#eebe77"
              :default-active="'0'"
              mode="horizontal"
              :ellipsis="false"
              router
          >
            <el-image src="/logo.png" style="width: auto; height: 60px; margin-left: 6%; cursor: pointer" @click="this.$router.push('/')"/>
            <div class="flex-grow"/>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/discover">发现</el-menu-item>
            <el-menu-item index="/about">关于</el-menu-item>

            <div v-if="this.$store.state.isLogin" style="display: flex;">
              <el-menu-item index="/project">
                <el-avatar v-if="hasAvatar" @error="() => hasAvatar = false"
                           :src="this.$store.state.user.avatarUrl" size="default" class="bordered-avatar"/>
                <el-avatar v-else
                           :icon="UserFilled" size="default" class="bordered-avatar"/>
              </el-menu-item>
              <el-sub-menu index="/project">
                <template #title>
                  <el-icon>
                    <Menu/>
                  </el-icon>
                </template>
                <el-menu-item index="/project"><el-icon><Collection /></el-icon>知识库管理</el-menu-item>
                <el-menu-item index="/user"><el-icon><UserFilled /></el-icon>个人信息</el-menu-item>
                <el-menu-item index="/logout"><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
              </el-sub-menu>
            </div>
            <div v-else style="display: flex;">
              <el-menu-item index="/login">登录</el-menu-item>
              <el-menu-item index="/reg">注册</el-menu-item>
            </div>


          </el-menu>
        </el-affix>
      </el-header>


      <!--      MAIN-->
      <el-main style="margin: 0; padding: 0; width: 100%; min-height: calc(100vh - 60px);">
        <router-view/>
      </el-main>

      <!--      FOOTER-->
      <MyFooter/>
    </el-container>
  </div>
</template>

<style scoped>

.flex-grow {
  flex-grow: 1;
}

.bordered-avatar {
  border: 2px solid #898c8f; /* 设置描边颜色和宽度 */
}
</style>